<template>
<!-- 申请列表 -->
  <div class="quit-container">
    <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    <div class="no-data" v-if="quitList.length === 0">
      没有数据
    </div>
    <ul class="quit-list" v-else>
      <li class="list-item" v-for="(item, i) of quitList" :key="i">
        <div class="icon">
          <img :src="item.headUrl" alt="">
        </div>
        <div class="info">
          <div>{{ item.nickname }}</div>
        </div>
        <div class="action">
          <!-- <div class="agree button" @click="onAgree(item)">
            同意
          </div>
          <div class="reject button" @click="onReject(item)">
            拒绝
          </div> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Webim } from '@/utils/types';
import { Response } from '@/api/bean';
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<QuitList>({
  mixins: [MessageMixin],
})
export default class QuitList extends Vue {

  private quitList: Array<any> = [];

  private eventList: Array<string> = [
    "$getQuitList",
  ];

  protected mounted() {
    this.initEvents(this.eventList);
    this.sendMessage(MsgTypeKV.getQuitList);
  }


  /**
   * 获取退群列表
   */
  private $getQuitList(data: any) {
    if (data.result === 0) {
      this.quitList = data.infoList;
    } else {
      this.quitList = [];
    }
  }


}
</script>

<style lang="stylus" scoped>
.list-item
  width 100%
  height 56px
  display flex
  justify-content space-between
  border-bottom 1px solid #dcdcdc
  .icon
    flex-basis 18%
    img 
      width 90% 
      height 90%
      border-radius 2px
  .info
    flex-basis 50%
    height 100%
    display flex
    justify-content space-between
    align-items center
    padding-left 32px
  .action
    flex-basis 32%
    display flex
    justify-content space-around
    align-items center
    .button
      width 48px
      height 18px
      border-radius 10px
      border 1px solid rgb(87, 189, 109)
      color rgb(87, 189, 109)
      font-size 12px
      line-height 18px
      &.reject
        color #f44336
        border-color #f44336

.quit-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto

.quit-list
  border-top 1px solid #dcdcdc

.no-data
  margin-top 40px
  font-size 18px
</style>

